<template>
  <div class="seasonal-analysis">
    <el-card class="year-selector">
      <el-row justify="space-between" align="middle">
        <el-col :span="12">
          <h3>季节性穿搭分析</h3>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-date-picker
            v-model="selectedYear"
            type="year"
            placeholder="选择年份"
            @change="loadData"
            style="width: 150px;"
          />
        </el-col>
      </el-row>
    </el-card>

    <div class="seasons-grid" v-loading="loading">
      <div 
        v-for="(seasonData, season) in analysisData.seasonalAnalysis" 
        :key="season"
        class="season-card"
      >
        <el-card shadow="hover">
          <template #header>
            <div class="season-header">
              <span class="season-name">{{ getSeasonName(season) }}</span>
              <el-tag :type="getSeasonColor(season)" size="small">
                {{ seasonData.totalWears }} 次穿搭
              </el-tag>
            </div>
          </template>

          <div class="season-content">
            <!-- 热门颜色 -->
            <div class="top-colors">
              <h5>热门颜色</h5>
              <div class="color-list">
                <div 
                  v-for="color in seasonData.topColors" 
                  :key="color.color"
                  class="color-item"
                >
                  <div 
                    class="color-dot" 
                    :style="{ backgroundColor: getColorHex(color.color) }"
                  ></div>
                  <span class="color-name">{{ color.color }}</span>
                  <span class="color-count">({{ color.count }})</span>
                </div>
              </div>
            </div>

            <!-- 热门风格 -->
            <div class="top-styles">
              <h5>热门风格</h5>
              <div class="style-list">
                <el-tag 
                  v-for="style in seasonData.topStyles" 
                  :key="style.style"
                  size="small"
                  style="margin-right: 8px; margin-bottom: 4px;"
                >
                  {{ style.style }} ({{ style.count }})
                </el-tag>
              </div>
            </div>

            <!-- 季节特征 -->
            <div class="season-features">
              <h5>季节特征</h5>
              <div class="features-list">
                <div class="feature-item">
                  <span class="feature-label">穿搭频率:</span>
                  <span class="feature-value">{{ getWearFrequency(seasonData.totalWears) }}</span>
                </div>
                <div class="feature-item">
                  <span class="feature-label">主要场合:</span>
                  <span class="feature-value">{{ getMainOccasion(season) }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 季节性洞察 -->
    <el-card class="seasonal-insights" v-loading="loading">
      <template #header>
        <span>季节性洞察</span>
      </template>

      <div class="insights-list">
        <div 
          v-for="insight in analysisData.insights" 
          :key="insight.insight"
          class="insight-item"
        >
          <div class="insight-icon">
            <el-icon><Lightbulb /></el-icon>
          </div>
          <div class="insight-content">
            <h4>{{ insight.insight }}</h4>
            <div class="insight-data">
              <span 
                v-for="item in insight.data" 
                :key="item.color || item.style"
                class="data-item"
              >
                {{ item.color || item.style }} ({{ item.count }})
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 季节建议 -->
    <el-card class="seasonal-suggestions">
      <template #header>
        <span>季节建议</span>
      </template>

      <div class="suggestions-grid">
        <div class="suggestion-card spring">
          <h4>春季建议</h4>
          <ul>
            <li>增加浅色系和清新色彩的搭配</li>
            <li>准备轻薄的外套和开衫</li>
            <li>尝试层次搭配应对温差</li>
          </ul>
        </div>

        <div class="suggestion-card summer">
          <h4>夏季建议</h4>
          <ul>
            <li>选择透气轻薄的面料</li>
            <li>多使用白色和浅色系</li>
            <li>准备防晒和遮阳配饰</li>
          </ul>
        </div>

        <div class="suggestion-card autumn">
          <h4>秋季建议</h4>
          <ul>
            <li>增加大地色系的搭配</li>
            <li>准备中厚度的外套</li>
            <li>尝试叠穿和层次搭配</li>
          </ul>
        </div>

        <div class="suggestion-card winter">
          <h4>冬季建议</h4>
          <ul>
            <li>选择保暖性好的单品</li>
            <li>多使用深色系搭配</li>
            <li>准备厚重的外套和配饰</li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { analysisAPI } from '@/api'

const loading = ref(false)
const selectedYear = ref(new Date().getFullYear())

const analysisData = reactive({
  year: new Date().getFullYear(),
  seasonalAnalysis: {},
  insights: []
})

const loadData = async () => {
  try {
    loading.value = true
    const response = await analysisAPI.getSeasonalWear({ 
      year: selectedYear.value 
    })
    
    if (response.code === 200) {
      Object.assign(analysisData, response.data)
    } else {
      throw new Error(response.message || '获取季节分析数据失败')
    }
  } catch (error) {
    console.error('获取季节分析失败:', error)
    ElMessage.error('获取数据失败')
    
    // 模拟数据
    Object.assign(analysisData, {
      year: selectedYear.value,
      seasonalAnalysis: {
        spring: {
          totalWears: 25,
          topColors: [
            { color: '白色', count: 8 },
            { color: '蓝色', count: 6 },
            { color: '粉色', count: 4 }
          ],
          topStyles: [
            { style: '休闲', count: 12 },
            { style: '清新', count: 8 },
            { style: '甜美', count: 5 }
          ]
        },
        summer: {
          totalWears: 35,
          topColors: [
            { color: '白色', count: 12 },
            { color: '蓝色', count: 8 },
            { color: '黄色', count: 6 }
          ],
          topStyles: [
            { style: '清爽', count: 15 },
            { style: '休闲', count: 12 },
            { style: '度假', count: 8 }
          ]
        },
        autumn: {
          totalWears: 28,
          topColors: [
            { color: '棕色', count: 8 },
            { color: '橙色', count: 6 },
            { color: '红色', count: 5 }
          ],
          topStyles: [
            { style: '复古', count: 10 },
            { style: '休闲', count: 9 },
            { style: '知性', count: 9 }
          ]
        },
        winter: {
          totalWears: 32,
          topColors: [
            { color: '黑色', count: 12 },
            { color: '灰色', count: 8 },
            { color: '深蓝', count: 6 }
          ],
          topStyles: [
            { style: '保暖', count: 15 },
            { style: '商务', count: 10 },
            { style: '休闲', count: 7 }
          ]
        }
      },
      insights: [
        {
          insight: '夏季偏爱浅色系搭配',
          data: [
            { color: '白色', count: 12 },
            { color: '蓝色', count: 8 }
          ]
        },
        {
          insight: '冬季更多选择深色系',
          data: [
            { color: '黑色', count: 12 },
            { color: '灰色', count: 8 }
          ]
        }
      ]
    })
  } finally {
    loading.value = false
  }
}

const getSeasonName = (season) => {
  const names = {
    spring: '春季',
    summer: '夏季',
    autumn: '秋季',
    winter: '冬季'
  }
  return names[season] || season
}

const getSeasonColor = (season) => {
  const colors = {
    spring: 'success',
    summer: 'warning',
    autumn: 'danger',
    winter: 'info'
  }
  return colors[season] || 'primary'
}

const getColorHex = (colorName) => {
  const colorMap = {
    '黑色': '#000000',
    '白色': '#FFFFFF',
    '灰色': '#808080',
    '红色': '#FF0000',
    '蓝色': '#0066CC',
    '绿色': '#00CC66',
    '黄色': '#FFCC00',
    '紫色': '#9966CC',
    '粉色': '#FF99CC',
    '棕色': '#996633',
    '橙色': '#FF6600',
    '深蓝': '#003366'
  }
  return colorMap[colorName] || '#CCCCCC'
}

const getWearFrequency = (totalWears) => {
  if (totalWears > 30) return '高频'
  if (totalWears > 20) return '中频'
  if (totalWears > 10) return '低频'
  return '很少'
}

const getMainOccasion = (season) => {
  const occasions = {
    spring: '踏青、约会',
    summer: '度假、休闲',
    autumn: '工作、聚会',
    winter: '工作、居家'
  }
  return occasions[season] || '日常'
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.seasonal-analysis {
  space-y: 20px;
}

.year-selector {
  margin-bottom: 20px;
}

.year-selector h3 {
  margin: 0;
  color: #333;
}

.seasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.season-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.season-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.season-content {
  space-y: 16px;
}

.season-content h5 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.color-list {
  space-y: 8px;
}

.color-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #eee;
}

.color-name {
  font-size: 12px;
  color: #333;
}

.color-count {
  font-size: 11px;
  color: #999;
}

.style-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.features-list {
  space-y: 8px;
}

.feature-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
}

.feature-label {
  color: #666;
}

.feature-value {
  color: #333;
  font-weight: 500;
}

.seasonal-insights,
.seasonal-suggestions {
  margin-bottom: 20px;
}

.insights-list {
  space-y: 16px;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 16px;
}

.insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.insight-content h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #333;
}

.insight-data {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.data-item {
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.suggestion-card {
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid;
}

.suggestion-card.spring {
  border-left-color: #67C23A;
  background: #f0f9ff;
}

.suggestion-card.summer {
  border-left-color: #E6A23C;
  background: #fdf6ec;
}

.suggestion-card.autumn {
  border-left-color: #F56C6C;
  background: #fef0f0;
}

.suggestion-card.winter {
  border-left-color: #909399;
  background: #f4f4f5;
}

.suggestion-card h4 {
  margin: 0 0 12px 0;
  color: #333;
}

.suggestion-card ul {
  margin: 0;
  padding-left: 16px;
}

.suggestion-card li {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .seasons-grid {
    grid-template-columns: 1fr;
  }
  
  .suggestions-grid {
    grid-template-columns: 1fr;
  }
  
  .insight-item {
    flex-direction: column;
    text-align: center;
  }
  
  .insight-icon {
    margin: 0 auto 12px auto;
  }
}
</style>
